<template>
	<view class="content">
		<view class="backGround" :style="{background: `url(${imgaeUrl('/static/mine/pinpai.png')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{background: `url(${imgaeUrl('/static/mine/pinpai.png')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack" class="display-flex align-items">
								<view class="margin-top-05">
									<uv-icon name="arrow-left" color="#FFFFFF" size="20"></uv-icon>
								</view>
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: -190rpx;" class="padding-about-24">
			<view class="view margin-top-20" @click="navigateTo('/pages/Mine/brandDetails/brandDetails?id=' + item.id)"
				v-for="item,index in list" :key="index">
				<view class="display-flex space-between align-items">
					<view class="font-size-28 font-weight-500">
						{{item.title}}
					</view>
					<view class="tans display-flex center align-items">
						<view class="">
							更多
						</view>

						<view class="margin-top-05">
							<uv-icon name="arrow-right" color="#FFF1E2" size="12"></uv-icon>
						</view>
					</view>
				</view>
				<view class="margin-top-20">
					<!-- <uv-swiper keyName="images" height="148rpx" radius="12" :list=""></uv-swiper> -->
					<image :src="item.icon" style="width: 100%;height: 148rpx;" class="border-radius-12" mode="aspectFill"></image>
				</view>
				<view class="margin-top-20">
					<scroll-view scroll-x="true" @scrolltolower="scrolltolower" class="scroll-view_H">
						<view class="" style="display: inline-block;">
							<view class="display-flex">
								<view v-for="goodsitem,goodsindex in item.goods_list" @click.stop="navigateTo('/pages/Home/goodsDetails/goodsDetails?id=' + goodsitem.product_id)" :key="goodsindex"
									class="margin-left-20 display-flex flex-direction-column space-between">

									<view class="">
										<image :src="goodsitem.thumb_img" style="width: 196rpx;height: 196rpx;"
											class="border-radius-12" mode=""></image>
										<view class="font-size-28 font-weight-500 webkit-line-clamp"
											style="-webkit-line-clamp: 2;">
											{{goodsitem.title}}
										</view>
									</view>
									<view class="">
										<view class="margin-top-10" style="color: #FF2E38;">
											<text class="font-size-24 font-weight-bold">￥</text>
											<text class=" font-size-36 font-weight-bold">{{goodsitem.sale_price}}</text>
										</view>
										<view class="display-flex margin-top-15 align-items">
											<view style="width: 108rpx;font-size: 22rpx;height: 40rpx;"
												class="label center-size-20  color-FFF">
												{{ goodsitem.plan_type == 1?'定向高佣':'预估佣金'}}
											</view>
											<view
												style="color: #FF2E38;width: 100rpx;font-size: 22rpx; height: 40rpx;border: none;background: #FFEEEA;"
												class="label1 center-size-20">
												¥{{goodsitem.price}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="" style="height: 10rpx;">

				</view>
			</view>
			<div class="kong"></div>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const swiperlist = ref(['/static/logo.png', '/static/logo.png'])
	const pagingState = ref(false)
	const page = ref(1)
	const list = ref([]) //热门视频
	onLoad(function(option) {
		getBrand()
	});
	onShow(function() {});
	/** 获取热门视频*/
	async function getBrand() {
		let object = {
			page: page.value,
		}
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.getBrand(object)
			list.value = list.value.concat(data.data)
			if (!data.has_more) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		getBrand()
	});
</script>

<style scoped lang="scss">
	.label1 {
		width: 68rpx;
		height: 32rpx;
		background: #FEEBEA;
		border-radius: 0rpx 6rpx 6rpx 0rpx;

	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.label {
		width: 80rpx;
		height: 32rpx;
		background: #E02E22;
		border-radius: 6rpx 0 0 6rpx;
	}

	.tans {
		width: 96rpx;
		height: 44rpx;
		background: #1E1712;
		border-radius: 22rpx;
		font-size: 24rpx;
		color: #FFF1E2;
	}

	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.backGround {
		width: 750rpx;
		height: 598rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}

	.content {
		min-height: 100vh;
		background: linear-gradient(180deg, rgba(31, 23, 18, 0.9) 0%, #1E1712 33%, #201712 100%);
	}
</style>